<!-- eslint-disable prettier/prettier -->
<template>
  <a-card>
    <div class="leftImg"></div>
    <div class="rightCon">
      <div class="mainInfo">
        <div class="top">
          <div class="name">{{ name }}</div>
          <div class="tag">
            <a-tag color="#e4f1ff">{{ tag }}</a-tag>
          </div>
        </div>
        <div class="bottom">
          <div class="work">{{ work }}</div>
        </div>
      </div>
      <div class="details">
        <a-descriptions :column="2" layout="inline-horizontal">
          <a-descriptions-item
            v-for="(item, index) of descriptionsInfo"
            :key="index"
            :label="item.label"
            :span="item.span ? item.span : 1"
          >
            <template #label>
              <div class="item-label-bt">
                <div :class="item.class"></div>

                <span style="margin-left: 10px">{{ item.label }}</span>
              </div>
            </template>
            <span class="my-value">
              {{ item.value }}
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

const name = ref("");
const work = ref("");
const tag = ref("");
const descriptionsInfo = ref([]);
const fetchData = () => {
  name.value = "赵春明";
  tag.value = "博士";
  work.value = "教授    |   博士生导师";
  descriptionsInfo.value = [
    {
      label: "电话：",
      value: "0571-88982965",
      class: "phone",
    },
    {
      label: "单位：",
      value: "哲学学院",
      class: "DW",
    },
    {
      label: "邮箱：",
      value: "2868771532@qq.com",
      class: "email",
    },
    {
      label: "职务：",
      value: "哲学院副院长",
      class: "ZW",
    },
    {
      label: "地址：",
      value: "北京师范大学哲学院",
      class: "address",
    },
    {
      label: "研究方向：",
      value: "马克思主义哲学、现代哲学",
      class: "YJFX",
    },
  ];
};
onMounted(() => {
  fetchData();
});
</script>

<style lang="less" scoped>
.arco-card {
  width: 100%;
  height: 300px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 30px;

  /deep/.arco-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90% !important;

    .leftImg {
      flex: 1;
      width: 200px;
      height: 230px;
      background: url("@/assets/images/zhaochunming.png") center center
        no-repeat;
      background-size: contain;
    }

    .rightCon {
      display: flex;
      flex: 5;
      flex-direction: column;
      align-items: start;
      justify-content: center;
      height: 230px;

      .mainInfo {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: start;
        width: 100%;
        border-bottom: 1px solid #eee;

        .top {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: start;
          width: 100%;
          padding-bottom: 2%;

          .name {
            margin-right: 2%;
            font-family: SourceHanSansSCVF-Bold;
            font-size: 30px;
            font-weight: 700;
            color: #111;
            letter-spacing: 0.81px;
          }

          .tag {
            .arco-tag {
              font-family: SourceHanSansCN-Regular;
              font-size: 16px;
              color: #0050a5;
            }
          }
        }

        .bottom {
          flex: 1;
          font-family: SourceHanSansCN-Regular;
          font-size: 16px;
          color: #333;
        }
      }

      .details {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: start;

        .item-label-bt {
          display: flex;
          justify-content: start;
          width: 100px;
          height: 18px;

          .phone {
            width: 18px;
            height: 18px;
            background: url("@/assets/images/phone.png") center center no-repeat;
            background-size: contain;
          }

          .DW {
            width: 18px;
            height: 18px;
            background: url("@/assets/images/单位.png") center center no-repeat;
            background-size: contain;
          }

          .email {
            width: 18px;
            height: 18px;
            background: url("@/assets/images/邮箱.png") center center no-repeat;
            background-size: contain;
          }

          .ZW {
            width: 18px;
            height: 18px;
            background: url("@/assets/images/职务管理.png") center center
              no-repeat;
            background-size: contain;
          }

          .address {
            width: 18px;
            height: 18px;
            background: url("@/assets/images/地址.png") center center no-repeat;
            background-size: contain;
          }

          .YJFX {
            width: 18px;
            height: 18px;
            background: url("@/assets/images/学士帽.png") center center
              no-repeat;
            background-size: contain;
          }
        }

        .my-value {
          display: inline-block;
          width: 250px;
          height: 18px;
          // background: #000;
        }
      }
    }
  }
}
</style>
